import { FC, useState, useCallback, useEffect, useRef } from "react";
import moment from 'moment';
import i18n from 'i18n-js';
import { observer } from "mobx-react";
import { View, Text, Image } from '@tarojs/components';
import { useDeviceDetailStore } from '@/hooks';
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';
import BottomAlert from '@/components/Alert/BottomAlert';
import successIcon from '@/assets/images/successIcon.png';
import service from '../../templateService';

function getNowTime() {
  const date = new Date();
  const year = date.getFullYear();
  let month = date.getMonth() + 1;
  month = month < 10 ? '0' + month : month;
  let day = date.getDate();
  day = day < 10 ? '0' + day : day;
  let hour = date.getHours();
  hour = hour < 10 ? '0' + hour : hour;
  let minute = date.getMinutes();
  minute = minute < 10 ? '0' + minute : minute;
  let second = date.getSeconds();
  second = second < 10 ? '0' + second : second;
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}

const dstyles = GStyleSheet.create({
  timeWrap: {
    height: '200px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  timeText: {

    fontSize: 16,
  },
  successView: {
    flexDirection: 'column',
  },
  icon: {
    width: 60,
    height: 60,
    marginBottom: 10,
  },
  tip: {
    color: DynamicColors.normalTextColor,
  }
});

const DeviceTimeCorrectModal: FC = observer(() => {

  const { deviceTimeCorrectModalShow } = useDeviceDetailStore();

  const [showType, setShowType] = useState('none');
  const [nowTime, setNowTime] = useState(getNowTime());
  const timer = useRef<any>();

  useEffect(() => {
    timer.current = setInterval(() => {
      setNowTime(getNowTime());
    }, 1000);
    return () => {
      clearInterval(timer.current);
    }
  }, []);

  const onCancel = useCallback(() => {
    service.hideTimeCorrect();
    setShowType('none');
  }, []);
  const onConfirm = useCallback(() => {
    const now = moment();
    const cur_timestamp = now.unix();
    const cmd: any = { cur_timestamp };
    const zoneStr = now.format('ZZ');
    console.log('now', cur_timestamp, zoneStr);
    if (zoneStr && zoneStr.length > 2) {
      // 时区格式是 +0800这样的，只拿前3个字符来处理
      const tmpStr = zoneStr.substring(0, 3);
      console.log(parseInt(tmpStr));
      cmd.cur_timezone = parseInt(tmpStr) + 12; // 加12，确保传给设备是1-24
    }
    console.log(cmd);
    service.sendCmd(cmd)
    setShowType('success');
    setTimeout(() => {
      onCancel();
    }, 500)
  }, [onCancel]);

  const styles = dstyles.useDynamicStyle();

  const isSuccess = showType == 'success';

  return (
    <BottomAlert
      isOpened={deviceTimeCorrectModalShow}
      showCancel={!isSuccess}
      showConfirm={!isSuccess}
      onCancel={onCancel}
      onConfirm={onConfirm}
    >
      <View style={styles.timeWrap}>
        {isSuccess ? <View className='centerFlex' style={styles.successView}>
          <Image src={successIcon} style={styles.icon} />
          <Text style={styles.tip}>{i18n.t('CORRECT_SUCCESS')}</Text>
        </View> : <Text style={styles.timeText}>{i18n.t('CURRENT_TIME')} {nowTime}</Text>}
      </View>
    </BottomAlert>
  );
});

export default DeviceTimeCorrectModal;
